<template>
  <div class="video-container">
    <el-card class="headers" shadow="hover" v-if="!isMobile">
      <TagList type="video" @SwitchListByTagId="getVideoListByTag" />
    </el-card>
    <div
      class="loadmore"
      :underline="false"
      v-if="!isDone"
      @click="loadMoreVideoList"
    >
      <i class="el-icon-bottom"></i>
      加载更多
    </div>
    <div class="no-more" v-else>
      没有更多数据了
    </div>
    <div class="video-list" v-loading="loading">
      <VideoCard
        class="video-card"
        v-for="v in videos"
        :key="v.id"
        :video="v"
      />
    </div>
  </div>
</template>

<script>
import VideoCard from '@/components/Video/VideoCard'
import TagList from '@/components/Article/TagList'

export default {
  props: {},
  components: {
    VideoCard,
    TagList
  },
  data() {
    return {
      limit: 8,
      page: 1,
      videos: [],
      count: null,
      loading: false,
      isDone: false,
      isSwitchTag: false,
      tagId: null
    }
  },
  computed: {},
  watch: {},
  created() {
    // 模拟15条视频数据
    // for (let i = 0; i < 15; i++) {
    //   const video = {
    //     id: i + 1,
    //     img_url: require("@/assets/img/Login.jpg"),
    //     video_title: `Video Title ${i + 1}`,
    //     creator_name: `Author ${i + 1}`,
    //     like_count: Math.floor(Math.random() * 1000),
    //     comment_count: Math.floor(Math.random() * 100),
    //     view_count: Math.floor(Math.random() * 10000),
    //     share_count: Math.floor(Math.random() * 100),
    //     create_time: '2023-05-23 10:00:00', // 示例的创建时间，实际可根据需求修改
    //   };
    //   this.videos.push(video);
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.getVideoList()
    })
  },
  beforeDetstroy() {},
  methods: {
    // 通过tagId获取视频
    async getVideoListByTag(id) {
      this.page = 1
      this.tagId = id
      const { limit, page } = this
      let res
      console.log(id)
      // 全部标签或指定标签
      if (id == 'all') {
        this.isSwitchTag = false
        this.getVideoList()
      } else {
        this.isSwitchTag = true
        this.tagId = id
        res = await this.$API.video.getVideoByTagId(id, limit, page)
      }
      console.log(res)
      if (!res.data) this.videos = []
      if (res.status == 200) {
        this.videos = res.data.payload
        this.count = res.data.count
        this.isDone = false
      }
    },
    // 获得视频列表
    async getVideoList() {
      this.page = 1
      console.log('11')

      this.loading = true
      const { limit, page } = this
      let res
      if (this.isSwitchTag) {
        res = await this.$API.video.getVideoByTagId(this.tagId, limit, page)
      } else {
        res = await this.$API.video.getVideoList(limit, page)
      }
      if (res.status == 200) {
        this.isDone = false

        this.count = res.data.count
        this.videos = res.data.payload
      }
      this.loading = false
    },
    async loadMoreVideoList() {
      this.loading = true
      console.log('11')
      this.page++

      const { limit, page } = this
      let res
      if (this.isSwitchTag) {
        res = await this.$API.video.getVideoByTagId(this.tagId, limit, page)
      } else {
        res = await this.$API.video.getVideoList(limit, page)
      }
      if (!res.data) this.isDone = true
      if (res.status === 200) {
        // 如果存在更多数据就将数据添加到列表里并添加数据
        if (res.data.payload.length > 0) {
          this.videos = [...this.videos, ...res.data.payload]
        } else {
          this.isDone = true
        }
      }
      this.loading = false
    }
  }
}
</script>

<style scoped src="@/assets/style/modules/video/video.css">
</style>
